import React, {Component} from 'react';
import { hashHistory } from 'react-router';
import { Icon, Button, Input, Select, Form, message, Row, Col, DatePicker } from 'antd';
import PropTypes from 'prop-types';
import { bindActionCreators } from 'redux'; 
import { connect } from 'react-redux';
import '@/common/css/index.less'
import moment from 'moment';
import { addProposal } from '../action';

import BreadcrumbBar from '@/common/BreadcrumbBar';//面包屑组件
import ToolBar from '@/common/ToolBar';//操作栏组件

const FormItem = Form.Item;
const dateFormat = 'YYYY-MM-DD HH:mm:ss';
const { TextArea } = Input;


const mapDispatchToProps = dispatch => bindActionCreators({
    onAddProposal: addProposal
}, dispatch);


class AddSuggest extends Component {
    constructor(props){
        super(props);

    }

    componentDidMount = () => {
        
    }

    addSubmit = () => {
		const form = this.props.form;
	    form.validateFields((err, values) => {
            if (err) {  return; }
        //   console.log('Received values of form: ', values);
            let data = {
                contactPhone:values.contactPhone,
                content:values.content,
                created_at:moment(values.created_at._d).format('YYYY-MM-DD HH:mm:ss'),
                proposalPersonDeptName:values.proposalPersonDeptName,
                subject:values.subject,
                proposalPersonName: values.proposalPersonName
            }

            // console.log(data)
            this.props.onAddProposal(data)//新增接口

            // form.resetFields()
              
	    });
	}
    // 返回
    goBack = () => {
        hashHistory.goBack();
    }

    render(){
        const { form } = this.props;
        const { getFieldDecorator } = form;
        const formItemLayout = {
            labelCol: {lg: { span: 6 },xs: { span: 18 },sm: { span: 8 },},
            wrapperCol: {lg: { span: 18 },xs: { span: 24 },sm: { span: 12 },},
        };

        return (
            <div>
                <BreadcrumbBar one="员工建议" two="我的建议" three="新建"/>
                <ToolBar>
                    <Button onClick={this.goBack}>返回</Button>
                </ToolBar>
                <div className="content-layer">
                    <Form>
                        <Row>
                            <Col span={10}>
                                <FormItem {...formItemLayout} hasFeedback label="建议标题" >
                                    {getFieldDecorator('subject', {
                                        rules: [{ required: true, message: '请填写标题' }],
                                    })(
                                        <Input />
                                    )}
                                </FormItem>
                            </Col>
                        </Row>
                        <Row>
                            <Col span={20}>
                                <Col span={12}>
                                    <FormItem {...formItemLayout}  label="建议日期">
                                        {getFieldDecorator('created_at', {
                                            initialValue:moment(new Date(),dateFormat),
                                            rules: [{ type: 'object', required: true, message: '请选择时间！' }]
                                        })(
                                            <DatePicker
                                                format={dateFormat}
                                                disabled
                                            />
                                        )}
                                    </FormItem>
                                    <FormItem {...formItemLayout} hasFeedback label="建议人" >
                                        {getFieldDecorator('proposalPersonName', {
                                            initialValue: '吴琳',
                                            rules: [{ required: true, message: '请输入建议人' }],
                                        })(
                                            <Input />
                                        )}
                                    </FormItem>
                                </Col>
                                <Col span={12}>
                                    <FormItem {...formItemLayout} hasFeedback label="所属部门" >
                                        {getFieldDecorator('proposalPersonDeptName', {
                                            initialValue: '计划营销部',
                                            rules: [{ required: true, message: '请选择部门' }],
                                        })(
                                            <Input />
                                        )}
                                    </FormItem>
                                    <FormItem {...formItemLayout} hasFeedback label="联系电话" >
                                        {getFieldDecorator('contactPhone', {
                                            initialValue: '18783226594',
                                            rules: [{ required: true, message: '请输入电话号码' }],
                                        })(
                                            <Input />
                                        )}
                                    </FormItem>
                                </Col>       
                            </Col>
                        </Row>
                        <Row>
                            <Col span={10}>
                                <FormItem {...formItemLayout} hasFeedback label="建议内容" >
                                    {getFieldDecorator('content', {
                                        rules: [{ required: true, message: '请填写500个字以内的内容',pattern:/^.{0,500}$/  }],
                                    })(
                                        <TextArea autosize={{ minRows: 8, maxRows: 12 }} placeholder="请输入建议的内容、建议的原由、解决措施或建议"/>
                                    )}
                                </FormItem>
                                <FormItem {...formItemLayout} hasFeedback label="附件" >
                                    
                                </FormItem>
                            </Col>
                        </Row>
                        <Row>
                            <Col span={24}>
                                <FormItem style={{textAlign:'center'}}>
                                    <Button type="primary" onClick={this.addSubmit}>保存</Button>
                                </FormItem>
                            </Col>
                        </Row>
                    </Form>
                </div>
            </div>
        )
    }
}

AddSuggest.PropTypes = {
    onAddProposal: PropTypes.func.isRequired
}

export default connect(null,mapDispatchToProps)(Form.create()(AddSuggest));